<template>
   <div class="swiper-container" ref="Swiper">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="item in list"
                    :key="item.id"
                  >
                    <img :src="item.imgUrl" />
                  </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
</template>

<script>
import Swiper from "swiper";
export default {
    name:'Carousel',
    props:['list'],
     watch: {
    list: {
      immediate: true,  //不管数据有没有变化，立即监听一次
      handler() {
        this.$nextTick(()=>{
            new Swiper(this.$refs.Swiper, {
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      autoplay: {
        delay: 1000, //1秒切换一次
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
        })
      },
    },
  },
}
</script>

<style>

</style>